<template>
  <div
    :key="currentTime"
    class="scrollContainer"
    :style="{ height: `${height}px` }"
  >
    <div
      class="scrollHead"
      :style="{
        height: headerHeight + 'px'
      }"
    >
      <div v-for="l in columns" :key="l.key" :style="{ width: `${l.width}px` }">
        {{ l.title }}
      </div>
    </div>

    <ul
      ref="wrapperDom"
      class="scrollBody"
      :style="{ height: `${height - headerHeight}px`, marginTop: '20px' }"
    >
      <ul ref="childDom1" @mouseenter="handleEnter" @mouseleave="handleLeave">
        <slot />
      </ul>
      <ul ref="childDom2" />
    </ul>
  </div>
</template>

<script setup lang="ts">
import {
  onMounted,
  watch,
  ref,
  onBeforeUnmount,
  computed,
  nextTick,
  reactive
} from "vue";

interface ViewProps {
  height: number;
  dataSource: Record<string, any>[];
  columns: TableColumn[];
  headerHeight?: number;
  onRowClick?: (l: Record<string, any>) => void;
  rowKey?: string;
  scroll?: boolean;
}

export interface TableColumn {
  key: string;
  title: string;
  width: number;
  render?: (index: number, data: Record<string, any>, text: any) => any;
  onClick?: (data: Record<string, any>) => void;
}

const props = defineProps<ViewProps>();
const { height, columns, headerHeight = 36, rowKey } = props;

const wrapperDom = ref<any>();
const childDom1 = ref<any>();
const childDom2 = ref<any>();
const currentTime = ref(new Date().getTime());

let count = 0;
let reqAnimation: number;

onMounted(() => {
  nextTick(() => {
    reqAnimation = window.requestAnimationFrame(taskStart);
  });
});
onBeforeUnmount(() => {
  handleEnter();
});
const dataSource = computed(() => {
  console.log("dataSource", dataSource);
  return props.dataSource;
});
watch(
  () => props.dataSource,
  () => {
    currentTime.value = new Date().getTime();
  }
);

// const getStyle = (p, l) => {
//   let pStyle = { width: `${p.width}px` };
//   if (l.lineColor) {
//     pStyle["color"] = l.lineColor;
//   }
//   return pStyle;
// };

var startTime = null,
  stepInMs = 100,
  drawCount = 0;
const taskStart = (timestamp: any) => {
  var progress;
  if (startTime === null) {
    startTime = timestamp;
  }
  progress = timestamp - startTime!;
  if (progress > stepInMs) {
    startTime = timestamp;
    if (
      childDom1.value?.clientHeight >= wrapperDom.value?.clientHeight &&
      childDom2.value?.clientHeight < 10
    ) {
      childDom2.value.innerHTML = childDom1.value.innerHTML;
    }
    if (wrapperDom.value?.scrollTop >= childDom1.value?.scrollHeight) {
      wrapperDom.value.scrollTop = 0;
      count = 0;
    } else {
      count += 1;
      wrapperDom.value.scrollTop = count;
    }
  }
  if (props.scroll) {
    reqAnimation = window.requestAnimationFrame(taskStart);
  }
};

const handleEnter = () => {
  window.cancelAnimationFrame(reqAnimation);
};
const handleLeave = () => {
  reqAnimation = window.requestAnimationFrame(taskStart);
};
const onCellClick = (l: Record<string, any>, p: TableColumn) => {
  p?.onClick?.(l);
};
</script>

<style lang="scss" scoped>
.scrollContainer {
  width: 100%;

  div {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    opacity: 0.9;
  }

  .scrollHead {
    display: flex;
    align-items: center;
    div {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .scrollBody {
    overflow-y: scroll;
    width: 100%;
    padding-left: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;

    ul {
      height: auto;
      padding: 0;
      margin: 0;
    }
    &::-webkit-scrollbar {
      display: none;
    }
    // li:nth-child(even) {
    //   background-color: rgba(43, 143, 171, 0.13);
    // }

    // li:nth-child(even):hover {
    //   background: rgba(43, 143, 171, 0.52);
    //   color: #fff;
    // }
  }
}
</style>
